<template>
  <div class="status-panel">
    <!-- 标题 -->
    <div class="panel-header">
      <h3 class="panel-title">设备状态</h3>
      <!-- 收起面板 -->
      <div class="fold-panel">
        <span>收起面板</span>
        <img :src="foldPanelIcon" alt="收起面板">
      </div>
    </div>
    <!-- 内容 -->
    <div class="panel-content">
      <!-- 名称 -->
      <div class="panel-top-name">HS3M Dock</div>
      <!-- 高亮标题模块-气象云 -->
      <div class="highlight-title-module">
        <!-- 左侧标题 -->
        <div class="module-title">
          <img class="module-title-icon" :src="meteorologicalCloudsIcon" alt="气象云">
          <div class="module-title-text">气象云：</div>
        </div>
        <!-- 右侧内容 -->
        <div class="module-content">
          <div class="meteorological">
            <!-- 天气 -->
            <div class="meteorological-item">
              <img class="meteorological-item-icon" :src="weatherIcon" alt="气象云">
              <div class="meteorological-item-text">天气：晴</div>
            </div>
            <!-- 温度 -->
            <div class="meteorological-item">
              <img class="meteorological-item-icon" :src="temperatureIcon" alt="温度">
              <div class="meteorological-item-text">温度：26℃</div>
            </div>
            <!-- 风速 -->
            <div class="meteorological-item">
              <img class="meteorological-item-icon" :src="windSpeedIcon" alt="风速">
              <div class="meteorological-item-text">风速：1.94m/s</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 高亮标题模块-任务状态 -->
      <div class="highlight-title-module">
        <!-- 左侧标题 -->
        <div class="module-title">
          <img class="module-title-icon" :src="taskExecutionIcon" alt="任务状态">
          <div class="module-title-text">任务状态：</div>
        </div>
        <!-- 右侧内容 -->
        <div class="module-content">
          <!-- 任务信息 -->
          <div class="task-info">
            <!-- 状态 -->
            <div class="task-info-item">
              <div class="task-info-item-label">
                <img class="status-point" :src="taskStatusPointIcon" alt="任务状态" />
              </div>
              <div class="task-info-item-content">--</div>
            </div>
            <!-- 任务名称 -->
            <div class="task-info-item">
              <div class="task-info-item-label">任务名称：</div>
              <div class="task-info-item-content">--</div>
            </div>
            <!-- 执飞人 -->
            <div class="task-info-item">
              <div class="task-info-item-label">执飞人：</div>
              <div class="task-info-item-content">--</div>
            </div>
            <!-- 调过面板开关 -->
            <div class="task-info-item switch-item">
              <div class="task-info-item-label">调过面板开关：</div>
              <div class="task-info-item-content">
                <el-switch v-model="switchValue1" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 任务状态详情 -->
      <div class="task-status-detail-container">
        <!-- 详情1 -->
        <div class="task-status-detail-item">
          <!-- 左侧图片 -->
          <div class="detail-img">
            <el-image :src="taskStatusUAVImage" fit="fill"/>
          </div>
          <!-- 右侧数据 -->
          <div class="detail-data-container">
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="taskStatusPointIcon" alt="状态" />
              </div>
              <div class="detail-data-item-label">状态：</div>
              <div class="detail-data-item-content">空闲中</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="networkSpeedIcon" alt="网速" />
              </div>
              <div class="detail-data-item-label">网速：</div>
              <div class="detail-data-item-content">144.00KB/s</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="satelliteSearchIcon" alt="搜星" />
              </div>
              <div class="detail-data-item-label">搜星：</div>
              <div class="detail-data-item-content">GPS 0 | RTK 0</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="weatherStationIcon" alt="气象站" />
              </div>
              <div class="detail-data-item-label">气象站：</div>
              <div class="detail-data-item-content">无雨</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="temperatureIcon2" alt="温度" />
              </div>
              <div class="detail-data-item-label">温度：</div>
              <div class="detail-data-item-content">0℃</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="windSpeedIcon2" alt="风速" />
              </div>
              <div class="detail-data-item-label">风速：</div>
              <div class="detail-data-item-content">0.5m/s</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="pendingFilesIcon" alt="待传文件" />
              </div>
              <div class="detail-data-item-label">待传文件：</div>
              <div class="detail-data-item-content">0</div>
            </div>
          </div>
        </div>
        <!-- 详情2 -->
        <div class="task-status-detail-item">
          <!-- 左侧图片 -->
          <div class="detail-img">
            <el-image :src="taskStatusUAVImage" fit="fill"/>
          </div>
          <!-- 右侧数据 -->
          <div class="detail-data-container">
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="batteryIcon" alt="电量" />
              </div>
              <div class="detail-data-item-label">电量：</div>
              <div class="detail-data-item-content">95%</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="signalStrengthIcon" alt="图传强度" />
              </div>
              <div class="detail-data-item-label">图传强度：</div>
              <div class="detail-data-item-content">--</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="satelliteSearchIcon" alt="搜星" />
              </div>
              <div class="detail-data-item-label">搜星：</div>
              <div class="detail-data-item-content">GPS | RTK</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="altitudeIcon" alt="高度" />
              </div>
              <div class="detail-data-item-label">高度：</div>
              <div class="detail-data-item-content">m</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="horizontalSpeedIcon" alt="水平速度" />
              </div>
              <div class="detail-data-item-label">H.S：</div>
              <div class="detail-data-item-content">m/s</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="distanceIcon" alt="距离" />
              </div>
              <div class="detail-data-item-label">距机场水平距离：</div>
              <div class="detail-data-item-content">m</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="gimbalPitchIcon" alt="云台俯仰角" />
              </div>
              <div class="detail-data-item-label">云台俯仰角：</div>
              <div class="detail-data-item-content">°</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="gimbalRollIcon" alt="云台横滚角" />
              </div>
              <div class="detail-data-item-label">云台横滚角：</div>
              <div class="detail-data-item-content">°</div>
            </div>
            <div class="detail-data-item">
              <div class="detail-data-item-icon-wrapper">
                <img class="detail-data-item-icon" :src="gimbalYawIcon" alt="云台偏航角" />
              </div>
              <div class="detail-data-item-label">云台偏航角：</div>
              <div class="detail-data-item-content">°</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 高亮标题模块-驾驶舱面板 -->
      <div class="highlight-title-module">
        <!-- 左侧标题 -->
        <div class="module-title">
          <img class="module-title-icon" :src="cockpitPanelIcon" alt="驾驶舱面板">
          <div class="module-title-text">驾驶舱面板：</div>
        </div>
      </div>
      <!-- 驾驶舱面板内容 -->
      <div class="cockpit-panel-container">
        <div class="cockpit-panel-item inactive">
          <div class="cockpit-panel-item-icon-wrapper">
            <img class="cockpit-panel-item-icon" :src="noTaskIcon" alt="暂无执行任务">
          </div>
          <div class="cockpit-panel-item-label">暂无执行任务</div>
        </div>
        <div class="cockpit-panel-item" @click="handleTaskExecute">
          <div class="cockpit-panel-item-icon-wrapper">
            <img class="cockpit-panel-item-icon" :src="taskExecuteIcon" alt="任务执行">
          </div>
          <div class="cockpit-panel-item-label">任务执行</div>
        </div>
        <div class="cockpit-panel-item">
          <div class="cockpit-panel-item-icon-wrapper">
            <img class="cockpit-panel-item-icon" :src="oneKeyTakeoffIcon" alt="一键起飞">
          </div>
          <div class="cockpit-panel-item-label">一键起飞</div>
        </div>
        <div class="cockpit-panel-item">
          <div class="cockpit-panel-item-icon-wrapper">
            <img class="cockpit-panel-item-icon" :src="returnHomeIcon" alt="飞机返航">
          </div>
          <div class="cockpit-panel-item-label">飞机返航</div>
        </div>
        <div class="cockpit-panel-item inactive">
          <div class="cockpit-panel-item-icon-wrapper">
            <img class="cockpit-panel-item-icon" :src="flightControlIcon" alt="获取飞行控制权">
          </div>
          <div class="cockpit-panel-item-label">获取飞行控制权</div>
        </div>
        <div class="cockpit-panel-item">
          <div class="cockpit-panel-item-icon-wrapper">
            <img class="cockpit-panel-item-icon" :src="fillLightIcon" alt="打开补光灯">
          </div>
          <div class="cockpit-panel-item-label">打开补光灯</div>
        </div>
        <div class="cockpit-panel-item">
          <div class="cockpit-panel-item-icon-wrapper">
            <img class="cockpit-panel-item-icon" :src="noFlyZoneIcon" alt="阻飞设置">
          </div>
          <div class="cockpit-panel-item-label">阻飞设置</div>
        </div>
      </div>
      <!-- 高亮标题模块-飞行参数设置 -->
      <div class="highlight-title-module">
        <!-- 左侧标题 -->
        <div class="module-title">
          <img class="module-title-icon" :src="flightParameterSettingIcon" alt="飞行参数设置">
          <div class="module-title-text">飞行参数设置：</div>
        </div>
      </div>
      <!-- 飞行参数设置内容 -->
      <div class="flight-parameter-setting-container">
        <div class="setting-item">
          <div class="setting-item-label">飞行器夜航灯</div>
          <div class="setting-item-content">
            <el-switch v-model="flightLight" />
          </div>
        </div>
        <div class="setting-item">
          <div class="setting-item-label">限高</div>
          <div class="setting-item-content">
            <div class="input-wrapper">
              <el-input
                v-model="limitHeight"
                placeholder=""
              >
                <template #append>m</template>
              </el-input>
            </div>
          </div>
        </div>
        <div class="setting-item">
          <div class="setting-item-label">避障</div>
          <div class="setting-item-content">
            <el-switch v-model="avoidance" />
          </div>
        </div>
        <div class="setting-item">
          <div class="setting-item-label">限远</div>
          <div class="setting-item-content">
            <div class="input-wrapper">
              <el-input
                v-model="limitDistance"
                placeholder=""
              >
                <template #append>m</template>
              </el-input>
            </div>
          </div>
        </div>
        <div class="setting-item">
          <div class="setting-item-label">电池保养状态</div>
          <div class="setting-item-content">
            <el-switch v-model="batteryMaintenance" />
          </div>
        </div>
        <div class="setting-item">
          <div class="setting-item-label">运行模式</div>
          <div class="setting-item-content">
            <div class="model-switch-wrapper">
              <div class="model-name">计划模式</div>
              <img class="model-icon" :src="modelIcon" alt="计划模式" />
            </div>
          </div>
        </div> 
      </div>
    </div>
  </div>
  
  <!-- 任务执行弹窗 -->
  <CommonDialog
    v-model="taskExecuteDialogVisible"
    title="任务执行"
    :width="560"
    :show-close="false"
    :background="taskExecuteDialogBg"
  >
    <div class="task-execute-content">
      <!-- 头部 -->
      <div class="task-execute-header">
        <!-- 新建按钮 -->
        <div class="add-btn" @click="handleAddTask">
          <img class="add-btn-icon" :src="addTackIcon" alt="新建任务"/>
          <div class="btn-text">新建任务</div>
        </div>
        <!-- 搜索框 -->
        <div class="search-ipt-wrapper">
          <el-input 
            v-model="taskSearchKeyword"
            placeholder="请输入搜索内容"
            class="task-search-input"
          >
            <template #suffix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
      <!-- 表格 -->
      <div class="task-execute-table-container">
        <el-table
          :data="taskTableData"
          class="common-table task-execute-table"
          :header-cell-style="taskHeaderCellStyle"
          :row-class-name="taskTableRowClassName"
          :height="tableHeight"
          @row-click="handleRowClick"
          :highlight-current-row="true"
        >
          <el-table-column prop="no" label="序号" :min-width="columnWidths.no" />
          <el-table-column prop="taskName" label="任务名称" :min-width="columnWidths.taskName" />
          <el-table-column prop="updateTime" label="更新时间" :min-width="columnWidths.updateTime" />
        </el-table>
      </div>
    </div>
    
    <template #footer>
      <button class="dialog-btn cancel" @click="taskExecuteDialogVisible = false">取消</button>
      <button class="dialog-btn confirm" @click="handleConfirmTaskExecute">确定</button>
    </template>
  </CommonDialog>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElImage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import CommonDialog from '@/components/CommonDialog.vue'
import foldPanelIcon from '@/assets/icons/icon_fold_up_panel2.png' // 收起面板icon
import meteorologicalCloudsIcon from '@/assets/icons/icon_meteorological_clouds.png' // 气象云icon
import taskExecutionIcon from '@/assets/icons/icon_task_status.png' // 任务状态icon
import cockpitPanelIcon from '@/assets/icons/icon_cockpit_panel.png' // 驾驶舱面板icon
import flightParameterSettingIcon from '@/assets/icons/icon_UAV.png' // 飞行参数设置icon
import weatherIcon from '@/assets/icons/icon_weather.png' // 天气icon
import temperatureIcon from '@/assets/icons/icon_temperature.png' // 温度icon
import windSpeedIcon from '@/assets/icons/icon_wind_speed.png' // 风速icon
import taskStatusPointIcon from '@/assets/icons/icon_status_point.png' // 任务状态点icon
// 详情1图标
import networkSpeedIcon from '@/assets/icons/icon_network_speed.png' // 网速图标
import satelliteSearchIcon from '@/assets/icons/icon_satellite_search.png' // 搜星图标
import weatherStationIcon from '@/assets/icons/icon_weather_station.png' // 气象站图标
import temperatureIcon2 from '@/assets/icons/icon_temperature_small.png' // 温度图标2
import windSpeedIcon2 from '@/assets/icons/icon_wind_speed_small.png' // 风速图标2
import pendingFilesIcon from '@/assets/icons/icon_pending_files.png' // 待传文件图标
// 详情2图标
import batteryIcon from '@/assets/icons/icon_battery.png' // 电量图标
import signalStrengthIcon from '@/assets/icons/icon_signal_strength.png' // 图传强度图标
import altitudeIcon from '@/assets/icons/icon_altitude.png' // 高度图标
import horizontalSpeedIcon from '@/assets/icons/icon_horizontal_speed.png' // 水平速度图标
import distanceIcon from '@/assets/icons/icon_distance.png' // 距离图标
import gimbalPitchIcon from '@/assets/icons/icon_gimbal_pitch.png' // 云台俯仰角图标
import gimbalRollIcon from '@/assets/icons/icon_gimbal_roll.png' // 云台横滚角图标
import gimbalYawIcon from '@/assets/icons/icon_gimbal_yaw.png' // 云台偏航角图标
// 驾驶舱面板图标
import noTaskIcon from '@/assets/icons/icon_no_task.png' // 暂无执行任务图标
import taskExecuteIcon from '@/assets/icons/icon_task_execute.png' // 任务执行图标
import oneKeyTakeoffIcon from '@/assets/icons/icon_one_key_takeoff.png' // 一键起飞图标
import returnHomeIcon from '@/assets/icons/icon_return_home.png' // 飞机返航图标
import flightControlIcon from '@/assets/icons/icon_flight_control.png' // 获取飞行控制权图标
import fillLightIcon from '@/assets/icons/icon_fill_light.png' // 打开补光灯图标
import noFlyZoneIcon from '@/assets/icons/icon_no_fly_zone.png' // 阻飞设置图标
// 飞行参数设置图标
import modelIcon from '@/assets/icons/icon_planning_mode.png' // 运行模式图标
// 任务执行弹窗
import taskExecuteDialogBg from '@/assets/images/monitor_task_execution_dialog_bg.png' // 任务执行弹窗背景
import addTackIcon from '@/assets/icons/icon_add.png' // 新建任务图标

const router = useRouter()

const switchValue1 = ref(false) // 调过面板开关开启状态

const taskStatusUAVImage = ref('https://s21.ax1x.com/2025/07/13/pVlfgAJ.png') // 任务状态里用到的图片

// 飞行参数设置变量
const flightLight = ref(false) // 飞行器夜航灯
const limitHeight = ref('') // 限高
const avoidance = ref(false) // 避障
const limitDistance = ref('') // 限远
const batteryMaintenance = ref(true) // 电池保养状态

// 任务执行弹窗
const taskExecuteDialogVisible = ref(false)
const taskSearchKeyword = ref('') // 任务搜索关键词

// 响应式视口宽度
const viewportWidth = ref(window.innerWidth)

// 监听窗口大小变化
const handleResize = () => {
  viewportWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// px转vw计算函数
const px2vw = (px) => {
  return (px / 1920) * viewportWidth.value
}

// 计算表格高度
const tableHeight = computed(() => {
  return px2vw(172)
})

// 计算列宽
const columnWidths = computed(() => ({
  no: px2vw(143),
  taskName: px2vw(210),
  updateTime: px2vw(160)
}))

// 当前选中的行索引
const currentSelectedRow = ref(null)

// 任务表格数据
const taskTableData = ref([
  {
    no: '01',
    taskName: '任务名称示例1',
    updateTime: '2025-01-13 14:30:00'
  },
  {
    no: '02',
    taskName: '任务名称示例2',
    updateTime: '2025-01-13 14:25:00'
  },
  {
    no: '03',
    taskName: '任务名称示例3',
    updateTime: '2025-01-13 14:20:00'
  }
])

// 表头样式
const taskHeaderCellStyle = () => {
  return {
    background: 'transparent',
    color: 'rgba(175, 215, 230, 1)',
    fontSize: '16px',
    fontWeight: '500',
    letterSpacing: '0px',
    lineHeight: '31px',
    border: 'none',
    padding: '0',
    height: '31px'
  }
}

// 行样式类名
const taskTableRowClassName = ({ rowIndex }) => {
  const baseClass = rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
  return currentSelectedRow.value === rowIndex ? `${baseClass} selected-row` : baseClass
}

// 处理行点击
const handleRowClick = (row, column, event) => {
  const index = taskTableData.value.findIndex(item => item === row)
  currentSelectedRow.value = index
}

// 处理任务执行点击
const handleTaskExecute = () => {
  taskExecuteDialogVisible.value = true
}

// 处理任务执行确定
const handleConfirmTaskExecute = () => {
  // 这里处理任务执行的逻辑
  console.log('执行任务')
  taskExecuteDialogVisible.value = false
}

// 处理新建任务点击
const handleAddTask = () => {
  router.push('/addTask')
}

</script>

<style lang="scss" scoped>
// 引入 Element Plus 组件样式覆盖
@import '@/style/element-overrides.scss';

.status-panel {
  width: 670px;
  height: 903px;
  background: url('@/assets/images/monitor_status_panel_bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  
  .panel-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    
    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      position: relative;
      bottom: -2px;
    }

    .fold-panel {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      bottom: -2px;
      cursor: pointer;
      span {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 16px;
        color: rgba(175, 215, 230, 1);
      }
      img {
        width: 16px;
        height: 16px;
        margin-left: 7px;
      }
    }
  }
  
  .panel-content {
    flex: 1;
    width: 100%;
    padding: 30px 16px 16px;
    box-sizing: border-box;
    // 名称
    .panel-top-name {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
    }
    // 高亮标题模块
    .highlight-title-module {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 8px;
      // 左侧标题
      .module-title {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        .module-title-icon {
          width: 14px;
          height: auto;
          margin-right: 6px;
        }
        .module-title-text {
          min-width: 70px;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(0, 255, 244, 1);
        }
      }
      // 右侧内容
      .module-content {
        flex: 1;
        // 气象
        .meteorological {
          width: 100%;
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          .meteorological-item {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            border-radius: 4px;
            background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
            border: 2px solid rgba(20, 109, 142, 1);
            padding: 9px 12px;
            & + .meteorological-item {
              margin-left: 16px;
            }
            .meteorological-item-icon {
              width: auto;
              height: 14px;
              margin-right: 9px;
            }
            .meteorological-item-text {
              font-size: 14px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 14px;
              color: rgba(255, 255, 255, 1);
            }
          }
        }
        // 任务信息
        .task-info {
          width: 100%;
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          padding: 10px 0;
          .task-info-item {
            flex: 1;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            & + .task-info-item {
              margin-left: 6px;
            }
            &.switch-item {
              width: 160px;
            }
            .task-info-item-label {
              font-size: 14px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 14px;
              color: rgba(255, 255, 255, 1);
              white-space: nowrap;
              .status-point {
                width: 14px;
                height: 14px;
                margin-right: 6px;
              }
            }
            .task-info-item-content {
              font-size: 14px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 14px;
              color: rgba(255, 255, 255, 1);
            }
          }
        }
      }
    }
    // 任务状态详情
    .task-status-detail-container {
      padding: 16px 0;
      position: relative;
      margin-bottom: 24px;
      
      // 上边框渐变
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(116.57deg, rgba(200, 200, 200, 0) 0%, rgba(0, 255, 244, 1) 51.27%, rgba(151, 151, 151, 0) 100%);
      }
      
      // 下边框渐变
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(116.57deg, rgba(200, 200, 200, 0) 0%, rgba(0, 255, 244, 1) 51.27%, rgba(151, 151, 151, 0) 100%);
      }
      // 详情item
      .task-status-detail-item {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        border-radius: 4px;
        background: rgba(2, 92, 109, 0.22);
        backdrop-filter: blur(6px);
        padding: 8px 8px 0;
        box-sizing: border-box;
        & + .task-status-detail-item {
          margin-top: 8px;
        }
        // 左侧图片
        .detail-img {
          width: 84px;
          height: 84px;
          border-radius: 4px;
          background: rgba(255, 255, 255, 1);
          overflow: hidden;
          margin-right: 14px;
          align-self: stretch;
          :deep(.el-image) {
            width: 100%;
            height: 100%;
          }
        }
        // 右侧数据
        .detail-data-container {
          flex: 1;
          align-self: stretch;
          display: flex;
          flex-flow: row wrap;
          justify-content: flex-start;
          align-items: center;
          .detail-data-item {
            width: 33.33%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 8px;
            box-sizing: border-box;
            padding-right: 10px;
            .detail-data-item-icon-wrapper {
              width: 14px;
              height: 14px;
              display: flex;
              flex-flow: row nowrap;
              justify-content: center;
              align-self: center;
              margin-right: 8px;
              .detail-data-item-icon {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
              }
            }
            .detail-data-item-label {
              font-size: 14px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 22px;
              color: rgba(175, 215, 230, 1);
            }
            .detail-data-item-content {
              font-size: 14px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 22px;
              color: rgba(175, 215, 230, 1);
            }
          }
        }
      }
    }
    // 驾驶舱面板内容
    .cockpit-panel-container {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 16px;
      .cockpit-panel-item {
        width: 153px;
        height: 32px;
        opacity: 0.91;
        border-radius: 4px;
        border: 2px solid rgba(20, 109, 142, 1);
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
        cursor: pointer;
        margin-bottom: 8px;
        margin-right: 8px;
        box-sizing: border-box;
        &:nth-child(4n) {
          margin-right: 0;
        }
        &.inactive {
          background: transparent;
        }
        .cockpit-panel-item-icon-wrapper {
          width: 14px;
          height: 14px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          .cockpit-panel-item-icon {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
          }
        }
        .cockpit-panel-item-label {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
    // 飞行参数设置内容
    .flight-parameter-setting-container {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: center;
      .setting-item {
        width: 315px;
        height: 47px;
        background: rgba(2, 92, 109, 0.22);
        backdrop-filter: blur(6px);
        margin-bottom: 8px;
        margin-right: 8px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        &:nth-child(2n) {
          margin-right: 0;
        }
        .setting-item-label {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 1);
        }
        .setting-item-content {
          // input包裹层
          .input-wrapper {
            width: 90px;
          }
          // 计划模式
          .model-switch-wrapper {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-end;
            align-items: center;
            .model-name {
              font-size: 14px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 14px;
              color: rgba(255, 255, 255, 1);
              margin-right: 10px;
            }
            .model-icon {
              width: 13px;
              height: 13px;
            }
          }
        }
      }
    }
  }
}

// 弹窗内容样式
.task-execute-content {
  // 头部
  .task-execute-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    // 新建按钮
    .add-btn {
      width: 102px;
      height: 32px;
      border-radius: 4px;
      background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
      border: 2px solid rgba(20, 109, 142, 1);
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: opacity 0.3s;
      margin-right: 8px;
      
      &:hover {
        opacity: 0.9;
      }
      
      .add-btn-icon {
        width: 12px;
        height: 12px;
        margin-right: 9px;
      }
      .btn-text {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 14px;
        color: rgba(255, 255, 255, 1);
      }
    }
    
    // 搜索框容器
    .search-ipt-wrapper {
      width: 418px;
    }
  }
  
  // 表格容器
  .task-execute-table-container {
    width: 100%;
    margin-top: 16px;
  }
}

// 弹窗按钮样式
.dialog-btn {
  min-width: 80px;
  height: 32px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 255, 244, 0.5);
  background: transparent;
  color: rgba(0, 255, 244, 1);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    background: rgba(0, 255, 244, 0.1);
    border-color: rgba(0, 255, 244, 0.8);
  }
  
  &.confirm {
    background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
    border-color: rgba(20, 109, 142, 1);
    color: rgba(255, 255, 255, 1);
    
    &:hover {
      opacity: 0.9;
    }
  }
}
</style>